<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>组件基础</title>
        <style type="text/css">
            h3,
            .links {
                text-align: center;
            }
            .wrapper { 
                margin: 15px auto; 
                border: 1px solid blue; 
                width: 80vw; 
            }
            .wrapper>*{
                margin: 10px;
            }
            .wrapper>.title {
                color: blue;
                line-height: 30px;
                border-bottom: 1px solid gray;
            }
            li { line-height: 30px; }
        </style>
    </head>
    <body>

        <h3>组件基础</h3>
        <p class="links">
            <a href="https://v3.cn.vuejs.org/guide/component-basics.html">组件基础(官方文档)</a>
        </p>

        <div class="wrapper">
            <p class="title">组件注册</p>
            <ul>
                <li> <a href="./use/vue3-global.html">定义组件、全局注册组件、使用组件[ Vue.js 3.x ]</a> </li>
                <li> <a href="./use/vue2-global.html">定义组件、全局注册组件、使用组件[ Vue.js 2.x ]</a> </li>
                <li> <a href="./use/vue3-local.html">定义组件、局部注册组件、使用组件[ Vue.js 3.x ]</a> </li>
                <li> <a href="./use/vue2-local.html">定义组件、局部注册组件、使用组件[ Vue.js 2.x ]</a> </li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">组件选项</p>
            <ul>
                <li> <a href="./options/vue3.html">组件选项 [ Vue.js 3.x ]</a> </li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">props</p>
            <ul>
                <li> <a href="./props/vue3-props.html">在父组件中通过 `attribute` 向子组件传递数据 [ Vue.js 3.x ]</a> </li>
                <li> <a href="./props/vue3-props-validate.html">数据验证 [ Vue.js 3.x ]</a> </li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">组件通信</p>
            <ul>
                <li> 
                    <a href="./communication/vue3-custom-event.html">
                        自定义事件: 从子组件向父组件传递数据 [ Vue.js 3.x ]
                    </a> 
                </li>
                <li> 
                    <a href="./communication/vue3-shopping-cart.html">
                        购物车: 从父组件向子组件传递数据 / 从子组件向父组件传递数据 [ Vue.js 3.x ]
                    </a> 
                </li>
                <li>
                    <a href="./communication/vue2-model.html">
                        在自定义组件上使用 v-model 指令 [ Vue.js 2.x ]
                    </a>
                </li>
                <li>
                    <a href="./communication/vue3-model.html">
                        在自定义组件上使用 v-model 指令 [ Vue.js 3.x ]
                    </a>
                </li>
                <li>
                    <a href="./communication/vue3-model-params.html">
                        为 v-model 指令设置参数 [ Vue.js 3.x ]
                    </a>
                </li>
                <li>
                    <a href="./communication/vue3-provide-inject.html">
                       借助于 Provide/Inject 实现跨级数据传递(从上到下) [ Vue.js 3.x ]
                    </a>
                </li>
                <li>
                    <a href="./communication/vue2-bus.html">
                        利用"中央事件总线"在任意组件之间进行数据传递 [ Vue.js 2.x ]
                    </a>
                </li>
                <li>
                    <a href="./communication/vue3-bus.html">
                        利用"中央事件总线"在任意组件之间进行数据传递 [ Vue.js 3.x ]
                    </a>
                </li>
                <li>
                    <a href="./communication/vue3-components.html">
                        话题列表(获取根组件/获取父组件/获取子组件引用) [ Vue.js 3.x ]
                    </a>
                </li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">插槽</p>
            <ul>
                <li> <a href="./slots/understand.html">理解插槽</a> </li>
                <li> <a href="./slots/use-slot.html">使用插槽( 单个插槽 / 具名插槽 / v-slot指令 )</a> </li>
                <li> <a href="./slots/shopping-cart.html">用插槽实现购物车效果</a> </li>
                <li> <a href="./slots/scoped-slot.html">作用域插槽( 理解作用域插槽( scoped slot ) 、插槽Prop(slot props) )</a> </li>
                <li> <a href="./slots/counter.html">用作用域插槽可以向父组件传递数据(但尽量不要依赖这种做法)</a> </li>
                <li> <a href="./slots/dynamic-slot-name.html">动态插槽名</a> </li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">组件生命周期</p>
            <div>创建实例 ==> 初始化 ==> 编译模板 ==> 挂载 ==> 使用 ==> 卸载</div>
            <ul>
                <li> <a href="./lifecycle/vue3-hook.html">通过生命周期钩子来体会组件的的生命周期 [ Vue.js 3.x ]</a> </li>
                <li> <a href="./lifecycle/vue3-init.html">通过生命周期钩子理解初始化阶段完成的操作 [ Vue.js 3.x ]</a> </li>
                <li> <a href="./lifecycle/vue2-init.html">通过生命周期钩子理解初始化阶段完成的操作 [ Vue.js 2.x ]</a> </li>
            </ul>
        </div>

        <div class="wrapper">
            <p class="title">组件高级用法</p>
            <ul>
                <li> <a href="./advanced/dynamic.html">动态组件( dynamic component)</a> </li>
                <li> <a href="./advanced/async.html">异步组件( async component)</a> </li>
            </ul>
        </div>
        
    </body>
</html>